<title>Where is my disk space - from Zetta.net</title>

<meta name="description" content="Visualize the Directories and Space on a Hard Drive" />
<meta name="keywords" content="HTML5,File System, Zetta.net, directories, space" />
<meta name="author" content="Lou Montulli" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="JS/jquery.prettyPhoto.js"></script>
<LINK href="CSS/prettyPhoto.css" rel="stylesheet" type="text/css">

<script type="text/javascript" charset="utf-8">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-9296505-7']);
  _gaq.push(['_setDomainName', 'zetta.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();


 function onPageLoad() {

     $("a[rel^='prettyPhoto']").prettyPhoto({ social_tools: false });
 }

</script>

<style type="text/css">
body {
margin-top: 15px;
margin: 5%;
}

.h1 {font-size:300%}


td.screenshot
{
border-style:solid;
border-width:1px;
}
div.video
{
}
</style>

<body onLoad="onPageLoad()">

<table width=100%>
<td>
<div class="h1">Where Is My Disk Space?</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;an HTML 5 based File system visualizer
</td>
<td>
<div style="text-align:right">
Sponsored by: 
<A href="http://www.zetta.net"><img align=center src="http://www.zetta.net/images/zettanewlogo.png"></a>
</div>
</td>
</table>

<h2><a href="FileSystemVisualizer.html"> Click HERE to start the visualizer</a></h2>

This tool allows you to visualize the directories and space used on your computer with the power of modern Web Browsers and HTML 5.<br>
You can use this to quickly find out which directories contain the most data.

<p>
Note: This site requires a modern browser with SVG support and a fast JavaScript engine.   <A href="http://firefox.com/">FireFox 10+</a>, Chrome 10+, etc...

<p>


<object width= "853" height="480"><param name="movie" value="http://www.youtube.com/v/LOMU3xGW6Y4?version=3&autoplay=1&rel=0&theme=light&loop=1&showinfo=0&modestbranding=1&controls=0&autohide=1&playlist=LOMU3xGW6Y4"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/LOMU3xGW6Y4?version=3&autoplay=1&rel=0&theme=light&loop=1&showinfo=0&modestbranding=1&controls=0&autohide=1&playlist=LOMU3xGW6Y4" type="application/x-shockwave-flash" allowfullscreen="true" width="853" height="480" allowscriptaccess="always"></embed></object>

<br>
<hr>
<br>
Short guided demonstration video:
<div class=video>
<iframe width="853" height="510" src="http://www.youtube.com/embed/KI6DZij9LnI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<br>
<hr>
<br>

Full length guided demonstration video:
<div class=video>
<iframe width="853" height="510" src="http://www.youtube.com/embed/IR2vOUSv5u8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<br>
<hr>
<br>
ScreenShots:

<table>
<td class="screenshot">
<a href="IMAGES/SummaryDemo.png" rel="prettyPhoto[foo]"><img width=150 height=91 src=IMAGES/SummaryDemoThumb.png></a>
</td>
<td class="screenshot">
<a href="IMAGES/TreeLayoutDemo.png" rel="prettyPhoto[foo]"><img width=150 height=91 src=IMAGES/TreeLayoutDemoThumb.png></a>
</td>
<td class="screenshot">
<a href="IMAGES/HListDemo.png" rel="prettyPhoto[foo]"><img width=150 height=91 src=IMAGES/HListDemoThumb.png></a>
</td>
<td class="screenshot">
<a href="IMAGES/FListDemo.png" rel="prettyPhoto[foo]"><img width=150 height=91 src=IMAGES/FListDemoThumb.png></a>
</td>
<td class="screenshot">
<a href="IMAGES/SunBurstDemo.png" rel="prettyPhoto[foo]"><img width=150 height=91 src=IMAGES/SunBurstDemoThumb.png></a>
</td>
<td class="screenshot">
<a href="IMAGES/TreeMapDemo.png" rel="prettyPhoto[foo]"><img width=150 height=91 src=IMAGES/TreeMapDemoThumb.png></a>
</td>
</table>

<br>
<hr>
<br>

This application makes heavy use of <a href="http://d3js.org/">d3.js</a> and the demonstration code that they have created.   
Additionally, <a href="http://jquery.com/">jQuery</a>, <a href="http://dojotoolkit.org/">Dojo</a>, <a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">PrettyPhoto</a>, <a href="http://en.wikipedia.org/wiki/JavaScript">Javascript</a> and <a href="http://en.wikipedia.org/wiki/Svg">SVG</a> were used.   
The full source of this application is hosted <a href="https://code.google.com/p/html5-file-space-visualizer/">here under a BSD License</a>

<p>
Created by <a href="http://en.wikipedia.org/wiki/Lou_Montulli">Lou Montulli</a> and sponsored by <a href="http://www.zetta.net/">Zetta.net</a>
<p>
Simple performance benchmark <a href="FileSystemVisualizer.html?RunBenchmark=1">here</a>.   Just select a dataset and compare on various browsers and devices.
